<template>
  <div class="hookFunction">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
<script lang="ts" setup>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,} from "vue";
// 数据
let sum = ref(0)
// 方法
function changeSum(){
    sum.value +=1
}
console.log('setup')
// 生命周期钩子
onBeforeMount(()=>{
  console.log('挂载之前')
})
onMounted(()=>{
  console.log('挂载完毕')
})
onBeforeUpdate(()=>{
  console.log('更新之前')
})
onUpdated(()=>{
  console.log('更新完毕')
})
onBeforeUnmount(()=>{
  console.log('卸载之前')
})
onUnmounted(()=>{
  console.log('卸载完毕')
})
</script>
<style scoped>
.hookFunction {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>